<!-- 确认订单  -->
<template>
  <view class="purchase-container">
    <!-- 商品信息 -->
    <view class="product-info">
      <image :src="product.imageUrl" class="product-image" mode="aspectFill"></image>
      <view class="product-details">
        <text class="product-name">{{ product.name }}</text>
        <text class="product-craftsman">工艺师: {{ product.craftsman }}</text>
        
        <view class="product-specs">
          <view class="spec-item" v-for="(spec, index) in product.specs" :key="index">
            <text class="spec-label">{{ spec.label }}:</text>
            <text class="spec-value">{{ spec.value }}</text>
          </view>
        </view>
        
        <view class="product-price-quantity">
          <text class="product-price">¥{{ product.price.toFixed(2) }}</text>
          <text class="product-quantity">x{{ product.quantity }}</text>
        </view>
        <text class="product-total">总计: ¥{{ (product.price * product.quantity).toFixed(2) }}</text>
      </view>
    </view>
    
    <!-- 商品详情 -->
    <view class="product-detail-section">
      <text class="section-title">商品详情</text>
      <text class="section-content">{{ product.details }}</text>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar">
      <view class="total-price">
        <text>合计: </text>
        <text class="price">¥{{ (product.price * product.quantity).toFixed(2) }}</text>
      </view>
      <view class="submit-btn" @tap="submitOrder">提交订单</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

interface Product {
  id: number;
  name: string;
  price: number;
  quantity: number;
  imageUrl: string;
  craftsman: string;
  details: string;
  specs: {label: string, value: string}[];
}

const product = ref<Product>({
  id: 0,
  name: '',
  price: 0,
  quantity: 1,
  imageUrl: '',
  craftsman: '',
  details: '',
  specs: []
});

onLoad((options) => {
  if (options.product) {
    const productData = JSON.parse(decodeURIComponent(options.product));
    product.value = {
      ...productData,
      specs: productData.specs || []
    };
  }
});

// 提交订单
const submitOrder = async () => {
  uni.showLoading({
    title: '提交中...'
  });
  
  try {
    // 准备订单数据
    const orderData = {
      id: Date.now(), // 使用时间戳作为临时ID
      productId: product.value.id,
      productName: product.value.name,
      quantity: product.value.quantity,
      totalPrice: product.value.price * product.value.quantity,
      imageUrl: product.value.imageUrl, // 添加图片URL
      orderTime: new Date().toISOString(),
      status: '已完成' // 设置订单状态为已完成
    };
    
    // 发送POST请求到json-server
    const response = await uni.request({
      url: 'http://localhost:3000/orders', // 假设你的json-server运行在本地3000端口
      method: 'POST',
      data: orderData,
      header: {
        'Content-Type': 'application/json'
      }
    });
    
    // 隐藏加载中提示
    uni.hideLoading();
    
    // 显示成功提示
    uni.showToast({
      title: '订单提交成功',
      icon: 'success',
      duration: 1500,
      success: () => {
        // 延迟跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }, 1500);
      }
    });
    
  } catch (error) {
    console.error('提交订单失败:', error);
    uni.hideLoading();
    uni.showToast({
      title: '提交订单失败，请重试',
      icon: 'none'
    });
  }
};
</script>

<style lang="scss">
/* 保持原有的样式不变 */
.purchase-container {
  padding-bottom: 120rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.product-info {
  display: flex;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .product-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 8rpx;
    margin-right: 30rpx;
  }
  
  .product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .product-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .product-craftsman {
      font-size: 26rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .product-specs {
      margin-bottom: 20rpx;
      
      .spec-item {
        display: flex;
        margin-bottom: 10rpx;
        font-size: 26rpx;
        
        .spec-label {
          color: #999;
          width: 160rpx;
          flex-shrink: 0;
        }
        
        .spec-value {
          color: #333;
          flex: 1;
        }
      }
    }
    
    .product-price-quantity {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10rpx;
      
      .product-price {
        font-size: 28rpx;
        color: #ff4d4f;
        font-weight: bold;
      }
      
      .product-quantity {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .product-total {
      font-size: 32rpx;
      color: #ff4d4f;
      font-weight: bold;
      margin-top: 20rpx;
      text-align: right;
    }
  }
}

.product-detail-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .section-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .total-price {
    font-size: 28rpx;
    
    .price {
      color: #ff4d4f;
      font-weight: bold;
      font-size: 36rpx;
    }
  }
  
  .submit-btn {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background: linear-gradient(90deg, #ff4d4f, #ff7875);
    color: #fff;
    border-radius: 35rpx;
    font-size: 32rpx;
    font-weight: bold;
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style>